<!doctype html>
<html lang="ko">
<head>
	<? include('inc/head.php'); ?>
</head>
<body>
	<div class="container-fluid">
		<div id="header" class="row-fluid">
			<? include_once('inc/header.php'); ?>
		</div>
		
		<div id="contents" class="row-fluid">
			<div class="span3">
				<div class="well">
					<ul class="nav nav-list">
						<li class="nav-header">WAX Score</li>
						<li><a href="#guide_pages">대상 페이지</a></li>
						<li><a href="#guide_exclude_pages">비대상 페이지</a></li>
						<li><a href="#guide_common">접근성 지표</a></li>
						<li class="nav-header">항목별 기준</li>
						<li><a href="#guide_alt_img">1. 적절한 대체 텍스트 (img)</a></li>
						<li><a href="#guide_alt_bg">1. 적절한 대체 텍스트 (bg)</a></li>
						<li><a href="#guide_alt_object">1. 적절한 대체 텍스트 (object)</a></li>
						<li><a href="#guide_contrast">5. 텍스트 콘텐츠의 명도 대비</a></li>
						<li><a href="#guide_focus">8. 초점 이동</a></li>
						<li><a href="#guide_skip_nav">12. 건너뛰기 링크</a></li>
						<li><a href="#guide_title">13. 제목 제공(&lt;title&gt;)</a></li>
						<li><a href="#guide_frame_title">13. 제목 제공(frame)</a></li>
						<li><a href="#guide_heading">13. 제목 제공(&lt;h1&gt;~&lt;h6&gt;)</a></li>
						<li><a href="#guide_linktexts">14. 적절한 링크 텍스트</a></li>
						<li><a href="#guide_lang">15. 기본 언어 표시</a></li>
						<li><a href="#guide_demand">16. 사용자 요구에 따른 실행</a></li>
						<li><a href="#guide_thead_tfoot">18. 표의 구성(caption, summary)</a></li>
						<li><a href="#guide_th">18. 표의 구성(th)</a></li>
						<li><a href="#guide_label">19. 레이블 제공</a></li>
						<li><a href="#guide_validation">21. 마크업 오류 방지</a></li>
					</ul>
				</div>
			</div>
			
			<div class="span9">
				<h2>WAX Score</h2>
				<p>c-wax가 제공하는 접근성 점수입니다. WAX Score는 기계적으로 검사할 수 있는 접근성 관련 항목들을 100점 만점으로 수치화하여 표시합니다.</p>
				<figure>
					<img src="assets/img/guide/score100.png" class="img-polaroid" alt="" />
					<figcaption>WAX Score: 100과 같이 c-wax 검사결과 상단에 WAX Score가 표시됩니다.</figcaption>
				</figure>
				
				<p>WAX Score가 100점이라고 정말로 접근성을 100%로 지킨건 아니라는 건 알고계시죠? 바보 이미지에 "천재"라고 대체
				텍스트를 달아도 기계적으로는 대체 텍스트를 일단 달았으니 접근성을 준수한 것으로 판단하니까요. 물론 대체 텍스트를
				달았다는 것 자체가 접근성을 준수했을 가능성이 높으므로 WAX Score는 충분히 의미를 가진답니다.</p>
				<p>아래는 WAX Score의 점수 구성에 대한 설명입니다.</p>
				<ul>
					<li><strong>대체 텍스트(30점)</strong>: 전체 이미지 대비 대체 텍스트가 제공된 이미지를 10점 만점으로 환산합니다. 이미지가 사용되지 않았다면 30점입니다.</li>
					<li><strong>키보드 포커스(10점)</strong>: <code>onfocus</code> 이벤트에 <code>blur()</code> 함수를 실행하여 키보드 포커스를 없애는 경우, CSS의 <code>outline</code> 속성이 0으로 설정된 경우가 있으면 0점, 그런 경우가 없으면 10점입니다.</li>
					<li><strong>프레임 제목(10점)</strong>: 페이지에 프레임이 제공되었다면 프레임에 제목(<code>title</code> 속성)이 제공된 비율을 10점 만점으로 환산합니다. 프레임이 제공되지 않았다면 10점입니다.</li>
					<li><strong>링크 텍스트(10점)</strong>: 전체 링크 대비 링크 텍스트가 제공된 링크를 10점 만점으로 환산합니다. 링크가 사용되지 않았다면 10점입니다.</li>
					<li><strong>기본 언어(10점)</strong>: 페이지에 기본 언어가 명시되었는지를 점수로 환산합니다. 프레임을 포함하여 검사하는 경우 기본 언어가 명시된 비율로 점수가 계산됩니다.</li>
					<li><strong>의도하지 않은 실행(10점)</strong>: <code>onclick</code> 이벤트에 <code>window.open</code>이 포함된 경우 새 창 알림(<code>title</code> 속성, <code>target="_blank"</code>)이 제공된 비율을 10점 만점으로 환산합니다. <code>window.open</code>이 포함된 <code>onclick</code> 이벤트가 없다면 10점입니다.</li>
					<li><strong>레이블(20점)</strong>: 전체 폼 서식 대비 레이블이 제공된 폼 서식의 비율을 20점 만점으로 환산합니다. 폼 서식이 사용되지 않았다면 20점입니다.</li>
				</ul>
				
				<h3 id="guide_pages">대상 페이지</h3>
				<p>이제부터는 c-wax 실행결과에서 표시되는 항목들에 대한 설명입니다.</p>
				<p>대상 페이지는 c-wax가 검사를 수행한 페이지를 표시합니다. 페이지 안에 프레임이 들어있다면 c-wax의 옵션에 따라 대상 페이지가 될 수도, 그렇지 않을 수도 있습니다.</p>
				<h3 id="guide_exclude_pages">비대상 페이지</h3>
				<p>페이지 안에 들어있는 프레임 중에 대상 페이지가 되지 못한 페이지들입니다.</p>
				<p>Google Chrome에서는 현재 애석하게도 페이지와 도메인이 다른 프레임은 검사를 수행할 수 없습니다. 항상 비대상 페이지에 표시되죠.</p>
				<p>북마클릿에서는 당연하게도 Google Chrome처럼 페이지와 도메인이 다른 프레임은 검사를 수행할 수 없습니다. 왜 이런
				제약이 생기는지 알고싶으시면 <a href="http://en.wikipedia.org/wiki/Same_origin_policy">Same origin policy(동일
				출처 정책)</a>을 참고하세요.</p>
				
				<h3 id="guide_common">웹 접근성 지표</h3>
				<p>웹 접근성 지표에는 접근성 검사 수행 결과가 표시됩니다.</p>
				<p><img src="assets/img/guide/ico_error.png" alt="X" /> 표시 빨간 배경색(이하 오류항목)이 표시되는 항목은 대부분 접근성 오류입니다.</p>
				<figure>
				<img src="assets/img/guide/error.png" class="img-polaroid" alt="" />
				<figcaption>앗, 빨간 배경! 오류인가봐요.</figcaption>
				</figure>
				<p><img src="assets/img/guide/ico_warning.png" alt="!"> 표시 노란 배경색(이하 의심항목)이 표시되는 항목은 접근성 오류가 의심되는 항목입니다.</p>
				<figure>
				<img src="assets/img/guide/warning.png" class="img-polaroid" alt="" />
				<figcaption>음, 노란 배경! 오류인지 생각해봐야겠군요.</figcaption>
				</figure>
			
				<h2>항목별 기준</h2>
				<h4 id="guide_alt_img">1. 적절한 대체 텍스트 (img)</h4>
				<p><code>&lt;img&gt;</code>, <code>&lt;area&gt;</code>, <code>&lt;input type=&quot;image&quot;&gt;</code> 요소의 <code>alt</code> 속성을 표시합니다. <code>alt</code> 속성이 빈 값으로 선언된 경우에는 내용을 <code>alt=""</code>으로, <code>alt</code> 속성이 빠진 경우에는 내용을 <code>alt 미정의</code>로 표시합니다.</p>
				<h4 id="guide_alt_bg">1. 적절한 대체 텍스트 (bg)</h4>
				<p>CSS Background image가 지정된 요소의 텍스트 콘텐츠를 표시합니다. 이 지표에서는 의미를 갖고 있는 배경 이미지를 찾아서 그 의미가 텍스트 콘텐츠로도 제공되고 있는지를 확인하면 됩니다. 텍스트 콘텐츠가 근처의 요소에 제공되고 있을지도 모르니 오류라고 생각하기 전에 잘 찾아보시는 게 좋아요. 의미없는 이미지는 그냥 지나치세요!</p>
				<h4 id="guide_alt_object">1. 적절한 대체 텍스트 (object)</h4>
				<p>이 지표에서는 페이지에 사용된 <code>&lt;object&gt;</code>, <code>&lt;embed&gt;</code>, <code>&lt;video&gt;</code>, <code>&lt;audio&gt;</code>, <code>&lt;canvas&gt;</code>, <code>&lt;svg&gt;</code> 요소를 표시합니다. 그냥 표시만 할뿐이니 표시된 요소의 대체 콘텐츠가 잘 제공되었는지, 키보드로는 잘 작동하는지 살펴보세요.</p>
				<h4 id="guide_contrast">5. 텍스트 콘텐츠의 명도 대비</h4>
				<p>전경색과 배경색을 선택하면 명도 대비를 표시해주는 지표입니다. 전경색과 배경색에 따라 결과란에 명도 대비값이 표시됩니다.</p>
				<p>Google Chrome용 명도 대비 도구는 페이지를 100%보다 크게 혹은 작게 확대 혹은 축소 했을 경우 색 선택이 원하는대로 잘 되지 않는 문제가 있어요. 빨리 해결하고 싶은 문제에요. 이 문제를 해결하여 github에 pull request를 해주신다면 제가 커피라도 대접해드릴게요!</p>
				<p>북마클릿에서는 작동하지 않습니다. ㅠㅠ</p>
				<h4 id="guide_focus">8. 초점 이동</h4>
				<p>이 지표에서는 키보드 초점이 표시되지 않는 형태로 제작된 코드를 일부 찾아줍니다. <code>blur()</code> 함수를 호출하여 초점을 사라지게 만든 경우라든지, CSS의 <code>outline</code> 속성을 0으로 설정한 경우에 해당됩니다.</p>
				<p>이 지표는 확실히 문제가 있는 경우만 진단하니 별 문제가 나오지 않았더라도 페이지에 초점 이동 문제가 있을 가능성은 남아있어요.</p>
				<h4 id="guide_skip_nav">12. 건너뛰기 링크</h4>
				<p>페이지에 사용된 최초 10개의 해시 링크를 표시합니다. 건너뛰기 링크가 여러개 제공될 수 있으니 넉넉하게 10개를 표시하는거에요. 여기서는 첫 항목부터 건너뛰기 링크가 나오는지, 건너뛰기 링크가 1번째 링크부터 시작하는지 확인하시면 되요. 건너뛰기 링크는 페이지의 시작점에 있어야 하니 1번째 링크여야 하니까요.</p>
				<p>건너뛰기 링크가 제대로 제공된 것 같다면 그 다음엔 키보드로도 초점이 가는지 직접 페이지에 테스트를 해보시면 끝나겠죠?</p>
				<h4 id="guide_title">13. 제목 제공(&lt;title&gt;)</h4>
				<p>모든 대상 페이지에 사용된 제목(<code>&lt;title&gt;</code>)을 표시합니다.</p>
				<p>제목이 제공되지 않았거나 특수문자가 반복된 경우 오류항목으로 표시됩니다.</p>
				<h4 id="guide_frame_title">13. 제목 제공(frame)</h4>
				<p>대상 페이지에 포함된 모든 프레임(<code>&lt;frame&gt;</code>, <code>&lt;iframe&gt;</code>)의 title 속성을 표시합니다.</p>
				<p>프레임 제목이 제공되지 않은 경우 오류항목으로 표시됩니다.</p>
				<h4 id="guide_heading">13. 제목 제공(&lt;h1&gt;~&lt;h6&gt;)</h4>
				<p>모든 대상 페이지에 사용된 헤딩 태그(<code>&lt;h1&gt;</code> ~ <code>&lt;h6&gt;</code>)를 표시합니다.</p>
				<h4 id="guide_linktexts">14. 적절한 링크 텍스트</h4>
				<p><code>&lt;a&gt;</code>, <code>&lt;area&gt;</code> 요소의 텍스트를 표시합니다.</p>
				<h4 id="guide_lang">15. 기본 언어 표시</h4>
				<p>모든 대상 페이지의 <code>&lt;html&gt;</code> 태그에 선언된 <code>lang</code>, <code>xml:lang</code> 속성을
				표시합니다. <code>lang</code>, <code>xml:lang</code>이 선언되어 있지 않으면 오류항목으로 표시됩니다.</p> 
				<p>HTML 계열의 Doctype 페이지는 <code>lang</code> 속성이 없으면 오류항목으로 표시됩니다.</p>
				<p>XHTML 1.0 Transitional Doctype 페이지는 <code>lang</code> 속성만 있고 <code>xml:lang</code> 속성이 없는 경우와
				그 반대의 경우 의심항목으로 표시됩니다.</p>
				<p>그 외의 XHTML Doctype 페이지는 <code>xml:lang</code> 속성이 없으면 오류항목으로 표시됩니다.</p>
				<h4 id="guide_demand">16. 사용자 요구에 따른 실행</h4>
				<p>이 지표에서는 onclick 이벤트 핸들러 자바스크립트 코드에 <code>window.open</code>이 포함된 경우 및 onchange
				이벤트 핸들러가 선언된 요소를 표시합니다.</p>
				<p>이 지표에서 표시되는 항목들은 사용자 요구에 따른 실행 지표의 오류가 발생될 수 있는 일부 항목을 표시합니다. 우선
				표시되는 항목 중에 오류가 있는지 보시고, 오류가 발견되지 않았다면 여기서 표시되지 않은 콘텐츠 중 오류가 있지는
				않은지 추가적으로 점검해야 합니다.</p>
				<h4 id="guide_thead_tfoot">18. 표의 구성(caption, summary)</h4>
				<p><code>&lt;table&gt;</code> 요소의 <code>&lt;caption&gt;</code>과 <code>summary</code>가 표시됩니다.</p>
				<p><code>&lt;caption&gt;</code>이 제공되었으나 제목 셀(<code>&lt;th&gt;</code>)이 하나도 없으면 오류로 표시됩니다.
				제목 셀이 필요없는 테이블은 배치용 테이블이니 <code>&lt;caption&gt;</code>을 제공하지 않아야 합니다.</p>
				<p>반대로 제목 셀(<code>&lt;th&gt;</code>)이 제공되었음에도 <code>&lt;caption&gt;</code>이 제공되지 않은 경우에도 오류로 표시됩니다.</p>
				<p>배치용 테이블은 의심항목으로 표시됩니다. 배치용 테이블은 지양하자는 의미를 담고있죠.</p>
				<h4 id="guide_th">18. 표의 구성(th)</h4>
				<p><a href="#guide_thead_tfoot">18. 표의 구성(caption, summary)</a>과 같은 조건으로 오류 및 의심항목을 표시합니다.</p>
				<p>추가로, <code>scope</code> 속성이 부여되지 않은 <code>&lt;th&gt;</code>가 존재하는 경우도 의심항목으로 표시합니다.</p>
				<h4 id="guide_label">19. 레이블 제공</h4>
				<p>레이블이 필요한 모든 입력 서식과 연결된 <code>&lt;label&gt;</code>과 <code>title</code> 속성을 표시합니다.</p>
				<p><code>&lt;label&gt;</code>이 모두 제공되지 않았다면 오류항목으로, <code>title</code> 속성만 제공되었다면
				의심항목으로 표시됩니다.</p>
				<p>표시되는 입력 서식은 <code>&lt;input type=&quot;hidden&quot;&gt;</code>, <code>&lt;input
				type=&quot;submit&quot;&gt;</code>, <code>&lt;input type=&quot;reset&quot;&gt;</code>, <code>&lt;input
				type=&quot;button&quot;&gt;</code>, <code>&lt;input type=&quot;image&quot;&gt;</code>을 제외한 모든
				<code>&lt;input&gt;</code> 및 <code>&lt;textarea&gt;</code>,
				<code>&lt;select&gt;</code>입니다.</p>
				<h4 id="guide_validation">21. 마크업 오류 방지</h4>
				<p><a href="http://validator.w3.org/" target="_blank">W3C Validation Service</a>의 HTML 유효성 검사 결과 중 접근성
				오류를 일으킬 수 있는 항목들을 표시합니다.</p>
				<p>HTML 유효성 검사 결과에는 <a href="http://www.htmlhelp.com/tools/validator/problems.html" target="_blank">알려진
				문제</a>가 발생할 수 있으니 무조건 오류라고 판단하지 않아야 하니 주의하세요!</p>
				<p>c-wax가 HTML 유효성 검사 결과 중 접근성 오류를 일으킬 수 있는 항목으로 판단하는 목록은 다음과 같습니다.</p>
				<p>북마클릿에서는 작동하지 않습니다. ㅠㅠ</p>
				<ul lang="en">
				<li>document type does not allow element * here; missing one of * start-tag.</li>
				<li>end tag for * which is not finished*</li>
				<li>end tag for element * which is not open*</li>
				<li>ID * already defined.</li>
				<li>unclosed start-tag requires SHORTTAG YES *</li>
				<li>unclosed end-tag requires SHORTTAG YES *</li>
				<li>empty start-tag *</li>
				<li>empty end-tag *</li>
				</ul>
			</div>
		</div>
	</div>

	<div id="footer" class="row-fluid">
		<? include('inc/footer.php') ?>
	</div>
</body>
</html>